.collection {
  height: calc(100vh - env(safe-area-inset-bottom));
  background-color: #f4f4f7;

  .collection-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 23rpx;
    justify-items: center;
    row-gap: 20rpx;

    .collection-container-item {
      width: 340rpx;
      background-color: #fff;
      height: 535rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      .collection-container-item-product-name {
        box-sizing: border-box;
        margin-top: 20rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        overflow-wrap: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .collection-container-item-product-price{
        display: flex;
        align-items: baseline;
        padding: 0 20rpx;
        box-sizing: border-box;
        margin-top: 35rpx;
        color: #f0453c;
        .collection-container-item-product-price-symbol{
          font-size: 20rpx;
        }
        .collection-container-item-product-price-value{
          font-size: 30rpx;
        }
      }
      .collection-container-item-add-button{
        position: absolute;
        width: 47rpx;
        height: 47rpx;
        color: #fff;
        background-color: #ea6229;
        display: flex;
        justify-content: center;
        align-content: center;
        right: 23rpx;
        
        bottom: 28rpx;
        box-sizing: border-box;
        border-radius: 30rpx;
      }
    }
  }
  .collection-empty-status{
    height: calc(100vh - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .collection-empty-status-text{
      margin-top: 40rpx;
      font-size: 30rpx;
      color: #999;
    }
  }
}